<script lang="ts" setup>
import { type PageMeta, type Menu } from "@/api/menu/types/menu"
import { computed, ref, watch } from "vue"
import { useMenuStoreHook } from "@/store/modules/menu"
import { menuUpdateApi, menuDelApi } from "@/api/menu/index"
import { ElMessage, type MessageParams } from "element-plus"

const useMenuStore = useMenuStoreHook()
const menuComputed = computed(() => useMenuStore.operation.menu)
const menu = ref<Menu>()
const meta = ref<PageMeta>()
const dialog = ref<boolean>(false)

const elMessage = (obj: MessageParams) => {
  ElMessage(obj)
}

watch(menuComputed, (newMenu: Menu) => {
  menu.value = newMenu
  meta.value = menu.value.meta || ({} as PageMeta)
})

function updateMenu() {
  console.log("测试")
  dialog.value = true
}

function okUpdate() {
  if (menu.value && meta) {
    menuUpdateApi({
      menu: menu.value || ({} as Menu),
      meta: meta.value || ({} as PageMeta)
    })
      .then(() => {
        elMessage({
          type: "success",
          message: "修改成功"
        })
      })
      .finally(() => {
        dialog.value = false
      })
  } else {
    elMessage({
      type: "info",
      message: "没有选择菜单"
    })
  }
}

const delMenu = () => {
  if (!menu.value) return
  menuDelApi(menu.value.id).then((res) => {
    const { code, msg } = res
    if (code === 200) {
      ElMessage({
        type: "success",
        message: "修改成功"
      })
    } else {
      ElMessage({
        type: "error",
        message: msg
      })
    }
  })
}
</script>

<template>
  <el-scrollbar>
    <el-form v-if="menu && meta" ref="form" :model="menu" label-width="90px" class="menu-info">
      <el-divider content-position="left">
        <el-tag effect="dark" type="danger">菜单信息</el-tag>
      </el-divider>
      <el-form-item label="ID">
        <el-input v-model="menu.id" disabled />
      </el-form-item>
      <el-form-item label="组件位置">
        <el-input v-model="menu.component" />
      </el-form-item>
      <el-form-item label="组件名称">
        <el-input v-model="menu.name" />
      </el-form-item>
      <el-form-item label="访问URL">
        <el-input v-model="menu.path" />
      </el-form-item>
      <el-form-item label="重定向">
        <el-input v-model="menu.redirect" />
      </el-form-item>
      <el-form-item label="菜单类型">
        <el-input v-model="menu.menuType" disabled />
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="menu.sort" />
      </el-form-item>
      <!-- 菜单元数据 -->
      <el-divider content-position="left">
        <el-tag effect="dark" type="danger">菜单元数据</el-tag>
      </el-divider>
      <el-form-item label="隐藏菜单">
        <el-switch v-model="meta.hidden" />
      </el-form-item>
      <el-form-item label="显示根菜单">
        <el-switch v-model="meta.affix" />
      </el-form-item>
      <el-form-item label="标题">
        <el-input v-model="meta.title" />
      </el-form-item>
      <el-form-item label="菜单图标">
        <el-input v-model="meta.svgIcon" />
      </el-form-item>
      <el-form-item label="角色">
        <el-select v-model="meta.roles" placeholder="请选择角色" multiple filterable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="updateMenu">修改</el-button>
        <el-button type="danger" @click="delMenu">删除</el-button>
      </el-form-item>
    </el-form>
    <el-empty v-else description="描述文字" />
  </el-scrollbar>
  <el-dialog title="修改确认" v-model="dialog">
    <template v-slot:footer>
      <div class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="okUpdate">确认修改</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.menu-info {
  width: 500px;
}
</style>
